import React, {forwardRef, useState, useEffect} from 'react';
import {Form, Input, Select} from "antd";

const {Option} = Select;

// 此处使用高阶组件 forwardRef() 为了将父组件的 ref 透传到子组件中
const UserForm = forwardRef((props, ref) => {
    const [isDisabled, setIsDisable] = useState(false)

    const {roleId, region} = JSON.parse(localStorage.getItem('token'))

    useEffect(() => {
        setIsDisable(props.isUpdataDisabled)
    }, [props.isUpdataDisabled])

    // 根据用户调整可选区域
    const optionRegionDisabled = (title) => {
        // 区域管理员时，区域选择只可以选同区域
        if (roleId === 2) {
            return region !== title;
        } else {
            return false
        }
    }

    // 根据用户调整可选角色
    const optionaRoleDisabled = (id) => {
        // 区域管理员时，角色选择只可以选编辑
        // if (roleId === 2 && id !== 3) {
        //     return true
        // } else {
        //     return false
        // }
        return roleId === 2 && id !== 3;
    }

    return (
        <Form
            ref={ref}
            layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[{required: true, message: '请输入用户名'}]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[{required: true, message: '请输入密码'}]}
            >
                <Input/>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色"
                rules={[{required: true, message: '请选择角色'}]}
            >
                <Select onChange={(value) => {
                    // console.log(value)
                    // 判断如果选择的是超级管理员
                    if (value === 1) {
                        // 就禁用区域选择
                        setIsDisable(true)
                        // 还需要清空区域的value
                        ref.current.setFieldsValue({
                            region: ""   // 设置为空字符串后，自动检查机制会禁止提交，需要三元判断区域检查
                        })
                    } else {
                        setIsDisable(false)
                    }
                }}>
                    {props.roleList.map(item =>
                        <Option value={item.id} key={item.id}
                                disabled={optionaRoleDisabled(item.id)}>{item.roleName}</Option>
                    )}
                </Select>
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={[{required: !isDisabled, message: '请选择区域'}]}
            >
                <Select disabled={isDisabled}>   {/* isDisabled：为了与下面的角色关联，选择超级管理员时，disabled */}
                    {props.regionList.map(item =>
                        <Option value={item.value} key={item.id}
                                disabled={optionRegionDisabled(item.title)}>{item.title}</Option>
                    )}
                </Select>
            </Form.Item>
        </Form>
    )
})

export default UserForm